<template>
  <div class='w-full h-full flex'>
    <n-card class='w-1/4 h-full'>
      <n-button @click="addComment('input')"> input</n-button>
    <n-button @click="addComment('select')"> select</n-button>
  <n-button @click="addComment('radio')"> radio</n-button>
<n-button @click="addComment('checkbox')"> checkbox</n-button>
<n-button @click="addComment('slider')"> slider</n-button>
<n-button @click="addComment('picker')"> picker</n-button>
<n-button @click="addComment('button')"> button</n-button>
<n-button @click="addComment('color')"> color picker</n-button>
<n-button @click="addComment('switch')">switch</n-button>
  <n-button @click="addComment('tranfser')">tranfser</n-button>
  <n-button @click="addComment('cascader')">cascader</n-button>
  <n-button @click="addComment('upload')">upload</n-button>
</n-card>
  <n-card class='w-1/2 h-full'>
    <div v-for='item in zujianlist' class='p-2' @click='xuanze(item.uniquekey)' :key='item.uniquekey'>
    <div :style='{width:`${item.span/24*100}%`}' class='h-20  m-2'
    :class="[selectuniquekey===item.uniquekey?'border border-yellow-500  border-dotted':'']">
    组件啊
  </div>
</div>
</n-card>
  <n-card class='w-1/4 h-full'>
    <n-tabs type='segment' v-if='selectuniquekey'>
      <n-tab-pane name='chap1' tab='样式'>
        <n-form ref='formRef1' :model='formValue' :rules='rules' :label-width='labelWidth'
        label-placement='left'>
        <n-grid>
          <n-gi :span='24'>
          <n-form-item label='宽度:' path='span'>
            <n-select v-model:value='formValue.span' :options='spanlist' @keydown.enter.prevent
            :on-update:value='shauxin' placeholder='请输入' clearable>
          </n-select>
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</n-tab-pane>
  <n-tab-pane name='chap2' tab='属性'>
    <n-form ref='formRef2' :model='formValue' :rules='rules' :label-width='labelWidth'
    label-placement='left'>
    <n-grid>
      <n-gi :span='24' v-for='(v,item) in formValue' :key='item + "form2"'>
      <n-form-item v-if='item==="label"' label='标题:' path='label'>
        <n-input v-model:value='formValue.label' @keydown.enter.prevent
        :on-update:value='shauxin' placeholder='请输入' clearable>
      </n-input>
    </n-form-item>
    <n-form-item v-else-if='item==="key"' label='关键字:' path='key'>
      <n-input v-model:value='formValue.key' @keydown.enter.prevent
      :on-update:value='shauxin' placeholder='请输入' clearable>
    </n-input>
  </n-form-item>
  <n-form-item v-else-if='item==="path"' label='路径:' path='path'>
    <n-input v-model:value='formValue.path' @keydown.enter.prevent
    :on-update:value='shauxin' placeholder='请输入' clearable>
  </n-input>
</n-form-item>
  <n-form-item v-else-if='item==="rules"' label='校验:' path='rules'>
    <n-input type='textarea' v-model:value='formValue.rules' @keydown.enter.prevent
    :on-update:value='shauxin' placeholder='请输入' clearable>
  </n-input>
</n-form-item>
  <n-form-item v-else-if='item==="options"' label='备选项:' path='options'>
    <n-input v-model:value='formValue.options' @keydown.enter.prevent
    :on-update:value='shauxin' placeholder='请输入' clearable>
  </n-input>
</n-form-item>
  <n-form-item v-else-if='item==="type"' label='表单类型:' path='type'>
    <n-input v-model:value='formValue.type' @keydown.enter.prevent
    :on-update:value='shauxin' placeholder='请输入' clearable>
  </n-input>
</n-form-item>
</n-gi>
</n-grid>
</n-form>
</n-tab-pane>
  <n-tab-pane name='chap3' tab='方法'>
    <n-form ref='formRef3' :model='formValue' :rules='rules' :label-width='labelWidth'
    label-placement='left'>
    <n-grid>
      <n-gi :span='24' v-for='(v,item) in formValue' :key='item + "form2"'>
      <n-form-item v-if='item==="change"' label='change回调:' path='change'>
        <n-input type='textarea' v-model='formValue.change' @keydown.enter.prevent
        :on-update:value='shauxin' placeholder='请输入' clearable>
      </n-input>
    </n-form-item>
  </n-gi>
</n-grid>
</n-form>
</n-tab-pane>
</n-tabs>
  <div v-else class='w-full h-full'>
    空的
  </div>
</n-card>
</div>
</template>

  <script setup name='Createcode' lang='ts'>
    import { useRoute, useRouter } from 'vue-router'
    import { computed, inject } from 'vue'
    import { ref } from 'vue'
    import { nanoid } from 'nanoid'

    const router = useRouter()
    const route = useRoute()

    interface zujianitem {
    span: string,    // 宽度
    label: string,  // 标题
    key: string,  // 关键字
    path: string,  // 校验路径
    rules?: Array<any>, // 校验规则
    options?: Array<any>,// 备选项
    type: string,  // 表单类型
    slot: boolean, // 是否使用插槽
    placeholder: string,
    password?: string,  // input专用类型，一般就是password或者text
    disabled: { add: boolean, edit: boolean, view: boolean },
    clearable?: boolean,  // 是否可清楚
    prefix?: string | null, // 前缀，一般是文字
    suffix?: string | null,  // 后缀，一般是文字
    datetype?: string,  // 日期类型，默认是date，
    valuefield?: string,  // 级联选择器的value字段
    labelfield?: string,  // 级联选择器的label字段
    change?: null | Function,  // change回调
    multiple?: boolean, // 是否多选
    uniquekey: string, // 唯一键，
  }

    interface actions {
    span: string,    // 宽度
    slot: string, // 是否使用插槽
    uniquekey: string, // 唯一键，
  }

    const zujianlist = ref<Array<zujianitem | actions>>([])  // 存放已选择的组件列表
    const selectuniquekey = ref('')
    const formValue = computed(() => {
    return zujianlist.value.find(item => item.uniquekey === selectuniquekey.value)
  })
    const rules = ref({})
    const labelWidth = ref(100)
    const baseitem = ref<zujianitem>({
    span: '24',    // 宽度
    label: '占位label',  // 标题
    key: '关键字',  // 关键字
    path: '校验路径',  // 校验路径
    rules: [], // 校验规则
    options: [],// 备选项
    type: '',  // 表单类型
    slot: false, // 是否使用插槽
    placeholder: '占位提示语句',
    password: 'text',  // input专用类型，一般就是password或者text
    disabled: { add: false, edit: false, view: false },
    clearable: false,  // 是否可清楚
    prefix: null, // 前缀，一般是文字
    suffix: null,  // 后缀，一般是文字
    datetype: 'date',  // 日期类型，默认是date，
    valuefield: 'id',  // 级联选择器的value字段
    labelfield: 'name',  // 级联选择器的label字段
    change: null,  // change回调
    multiple: false, // 是否多选
    uniquekey: nanoid(), //唯一键
  })
    // 添加组件
    const addComment = (key: string) => {
      switch (key) {
      case 'input':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      type: 'input',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      password: 'text',  // input专用类型，一般就是password或者text
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      prefix: null, // 前缀，一般是文字
      suffix: null,  // 后缀，一般是文字
      change: null,  // change回调
      uniquekey: nanoid(),
    })
      break
      case 'select':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: 'select',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'radio':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: 'radio',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'checkbox':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: 'checkbox',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'picker':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: '',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      password: 'text',  // input专用类型，一般就是password或者text
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      prefix: null, // 前缀，一般是文字
      suffix: null,  // 后缀，一般是文字
      datetype: 'date',  // 日期类型，默认是date，
      valuefield: 'id',  // 级联选择器的value字段
      labelfield: 'name',  // 级联选择器的label字段
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'slider':
      break
      case 'button':
      zujianlist.value.push({
      span: '24',    // 宽度
      slot: '', // 是否使用插槽
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'tranfser':
      break
      case 'switch':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: 'checkbox',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'color':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      type: 'input',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      password: 'text',  // input专用类型，一般就是password或者text
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      prefix: null, // 前缀，一般是文字
      suffix: null,  // 后缀，一般是文字
      change: null,  // change回调
      uniquekey: nanoid(),
    })
      break
      case 'cascader':
      zujianlist.value.push({
      span: '24',    // 宽度
      label: '占位label',  // 标题
      key: '关键字',  // 关键字
      path: '校验路径',  // 校验路径
      rules: [], // 校验规则
      options: [],// 备选项
      type: 'select',  // 表单类型
      slot: false, // 是否使用插槽
      placeholder: '占位提示语句',
      disabled: { add: false, edit: false, view: false },
      clearable: false,  // 是否可清楚
      change: null,  // change回调
      multiple: false, // 是否多选
      uniquekey: nanoid(), //唯一键
    })
      break
      case 'upload':
      break
    }
    }

    // 点击已创建的组件
    const xuanze = (key: string) => {
      selectuniquekey.value = key
    }

    // 刷新
    const shauxin = (data: any, key: any = null) => {
    }

    // 备选项
    const spanlist=ref([])

    const zhucefunc: Function | undefined = inject('zhuceshuaxinfunc')
    // 初始化函数
    const init = () => {
      // 初始化span备选项
      spanlist.value = []
        for(let i = 1;i<25;i++){
      spanlist.value.push({label:i.toString(),value:i.toString()})
    }
    }


    // 初始化区域
    init()
    zhucefunc && zhucefunc({ [route.name!.toString()]: init })
  </script>

  <style scoped>

  </style>